<template>
  <div class="example-container">
    <!-- 正确的表单布局示例 -->
    <el-form :model="form" label-width="100px">
      <el-form-item label="用户名">
        <div style="display: flex; align-items: center; gap: 8px;">
          <el-input v-model="form.username" placeholder="请输入用户名" />
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
      </el-form-item>
      
      <el-form-item label="状态">
        <el-select v-model="form.status" placeholder="请选择状态">
          <el-option label="启用" value="1" />
          <el-option label="禁用" value="0" />
        </el-select>
      </el-form-item>
    </el-form>
    
    <!-- 表格示例 -->
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="status" label="状态" />
    </el-table>
  </div>
</template>

<script setup>
// 定义响应式数据
const form = reactive({
  username: '',
  status: ''
});

const tableData = ref([]);
const loading = ref(false);

// 搜索方法
function search() {
  console.log('搜索:', form.username);
}

// 组件挂载时获取数据
onMounted(() => {
  // 模拟加载数据
  loading.value = true;
  setTimeout(() => {
    tableData.value = [
      { name: '张三', status: '启用' },
      { name: '李四', status: '禁用' }
    ];
    loading.value = false;
  }, 1000);
});
</script>

<style scoped>
.example-container {
  padding: 20px;
}
</style>